<template>
	<view class="container" @touchmove.stop.prevent="moveStop">
		<view class="l-box-pa-l c-color-f w100" :style="{zIndex: 100, backgroundColor: '#34312a',paddingTop:`${paddingTop}px`,height:`${height}px`, top: `-${shift?height:0}px`,transition: `top .3s`}">
			<view class="l-fjb o-plr h100">
				<view class="c-tc">
					<text class="iconfont icon-fanhui"></text> <text class="o-ml-s c-t85">返回</text> 
				</view>
				<view class="l-fc c-t6">
					<view class="c-tc o-mr-l">
						<u-icon name="download" color="#ffffff" size="38"></u-icon>
						<view class="">全本下载</view>
					</view>
					<view class="c-tc o-mr-l">
						<u-icon name="order" color="#ffffff" size="38"></u-icon>
						<view class="">书评</view>
					</view>
					<view class="c-tc o-mr-s">
						<u-icon name="more-dot-fill" color="#ffffff" size="38"></u-icon>
						<view class="">更多</view>
					</view>
				</view>
			</view>
		</view>
		<view class="l-box-pa-b c-color-f w100" :style="{zIndex: 100, backgroundColor: '#34312a',paddingTop:`${paddingTop}px`,height:`130px`, bottom: `-${shift?'130px':0}`,transition: `bottom .3s`}">
			<view class="o-plr">
				<view class="l-fjb c-tc o-ptb-b">
					<view class="l-f1">上一章</view>
					<view class="l-f2">
						<u-line-progress height="20" active-color="#f69b01" :percent="70"></u-line-progress>
					</view>
					<view class="l-f1">下一章</view>
				</view>
				<view class="l-fjb o-pb-l">
					<view class="l-f1 c-tc c-t7">
						<u-icon name="more-dot-fill" color="#ffffff" size="50"></u-icon>
						<view class="">目录</view>
					</view>
					<view class="l-f1 c-tc c-t7">
						<u-icon name="more-dot-fill" color="#ffffff" size="50"></u-icon>
						<view class="">夜间</view>
					</view>
					<view class="l-f1 c-tc c-t7">
						<u-icon name="more-dot-fill" color="#ffffff" size="50"></u-icon>
						<view class="">亮度</view>
					</view>
					<view class="l-f1 c-tc c-t7">
						<u-icon name="more-dot-fill" color="#ffffff" size="50"></u-icon>
						<view class="">阅读设置</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return{
				heightNav: 0
			}
		},
		props:{
			paddingTop: {
				type: Number,
				default: 0
			},
			height: {
				type: Number,
				default: 0
			},
			shift: {
				type: Boolean,
				default: false
			}
		},
		mounted() {
			
		},
		methods:{
			moveStop() {}
		}
	}
</script>

<style>
	.container{
		
	}
	
</style>
